<template>
  <div class="star-score">
    <span
      class="star-item on"
      v-for="(item, index) in starNumbers.on"
      :key="`on${index}`"
      :class="`size${defaultSize}`"
    ></span>
    <span
      class="star-item half"
      v-for="(item, index) in starNumbers.half"
      :key="`half${index}`"
      :class="`size${defaultSize}`"
    ></span>
    <span
      class="star-item off"
      v-for="(item, index) in starNumbers.off"
      :key="`off${index}`"
      :class="`size${defaultSize}`"
    ></span>
  </div>
</template>

<script>
export default {
  props: {
    score: Number,
    size: Number,
  },
  data() {
    return {
      defaultSize: 10,
    }
  },
  mounted() {
    if (this.size) {
      this.defaultSize = this.size
    }
  },
  computed: {
    starNumbers() {
      let on, half, off
      on = Math.floor(this.score)
      if (this.score % 1 >= 0.5) {
        half = 1
      } else {
        half = 0
      }
      off = 5 - on - half
      return { on, half, off }
    },
  },
}
</script>

<style lang="less">
@import "../../common/style/mixin.less";
.star-score {
  display: flex;
  .star-item {
    width: 1rem;
    height: 1rem;
    margin-right: 0.3rem;
    background-size: 1rem 1rem;
    &.on {
      .bg-img("./images/star24_on");
    }
    &.half {
      .bg-img("./images/star24_half");
    }
    &.off {
      .bg-img("./images/star24_off");
    }

    &.size15 {
      width: 1.5rem;
      height: 1.5rem;
      margin-right: 0.6rem;
      background-size: 1.5rem 1.5rem;
      &.on {
        .bg-img("./images/star36_on");
      }
      &.half {
        .bg-img("./images/star36_half");
      }
      &.off {
        .bg-img("./images/star36_off");
      }
    }
  }
}
</style>
